<template>
	<view v-if="text" class="custom-tag" :style="{
      backgroundColor: bgColor,
      color: textColor,
    }">
		{{ text }}
	</view>
</template>

<script setup>
	defineProps({
		text: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: '#f5f5f5' // 默认浅灰色背景
		},
		textColor: {
			type: String,
			default: '#333333' // 默认深灰色文字
		}
	})
</script>

<style scoped>
	.custom-tag {
		height: 48rpx;
		padding: 0 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		font-size: 24rpx;

		white-space: nowrap;
		/* 防止文字换行 */
		box-sizing: border-box;
	}
</style>